簡(jiǎn)介：不用任何 JavaScript 腳本，使用純 CSS 實(shí)現(xiàn)頁(yè)面之間的平滑過(guò)渡，體驗(yàn) transform、transition、animation 帶來(lái)的神奇體驗(yàn)。
第1章 導(dǎo)航制作
分析動(dòng)畫實(shí)現(xiàn)原理，編寫頁(yè)面結(jié)構(gòu)，及講解 input 和 label 配合: after、:before 的使用。
第2章 導(dǎo)航頁(yè)動(dòng)畫制作
講解 @font-face 和 transform 中 rotate 的使用。
- 視頻： 2-1 導(dǎo)航頁(yè)面切換（1） (05:21)
- 視頻： 2-2 導(dǎo)航頁(yè)面切換（2） (08:29)
- 視頻： 2-3 導(dǎo)航頁(yè)面切換（3） (09:05)
- 視頻： 2-4 導(dǎo)航頁(yè)背影動(dòng)畫制作（圖標(biāo)三角背景制作） (04:43)
- 視頻： 2-5 導(dǎo)航頁(yè)背影動(dòng)畫制作（@font-face實(shí)現(xiàn)小icon） (14:15)
- 視頻： 2-6 導(dǎo)航頁(yè)背影動(dòng)畫制作（animation與transition區(qū)別） (12:17)
- 視頻： 2-7 導(dǎo)航頁(yè)背影動(dòng)畫制作（animation制作動(dòng)畫） (11:09)
第3章 細(xì)節(jié)優(yōu)化及總結(jié)
對(duì)網(wǎng)頁(yè)動(dòng)畫細(xì)節(jié)進(jìn)行補(bǔ)充，最后對(duì)課程進(jìn)行總結(jié)歸納。